<template>
  <iframe id="weather" :src="weatherApi + num"></iframe>
</template>

<script>
import config from "../../json/init.json";

export default {
  data() {
    return {
      weatherApi: config.weatherApi,
      num: 1,
    };
  },
  mounted() {
    this.setNum();
    this.adoptScreen();

    this.$onWin("resize", () => {
      this.$funcs.debounce(() => {
        this.setNum();
        this.adoptScreen();
      }, 100);
    });
  },
  methods: {
    adoptScreen() {
      this.$nextTick(() => {
        // 设置背景图的尺寸
        const PROP = 1.78; // 背景图固定比例
        let w = document.body.clientWidth,
          h = document.body.clientHeight;
        let isVertical = parseFloat(w / h) < PROP;
        document.body.style.backgroundSize = isVertical
          ? "auto 100%"
          : "100% auto";
      });
    },
    setNum() {
      this.$nextTick(() => {
        let weather = document.getElementById("weather");
        let w = weather.clientWidth;
        this.num = Math.ceil((w - 60) / 160);
      });
    },
  },
};
</script>

<style lang="less">
#weather {
  display: block;
  width: 100%;
  border: none;
  overflow: hidden;
  margin: 0 auto;
  height: 56px;
  opacity: 0.9;

  ::v-deep html{
    overflow: hidden;
  }
}
</style>
